"use client";

import EmptyState from "@/components/EmptyState";
import EditModal from "@/components/EditModal";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import CommonSelector from "@/components/CommonSelector";
import { Plus, Pencil, Trash2 } from "lucide-react";
import { useState, useEffect, useCallback } from "react";
import { Card, CardHeader, CardContent, CardTitle } from "@/components/ui/card";
import { STATUS } from "@/consts";
export default function CampusManagement({
  initialCampuses,
  getAllCampuses,
  createCampus,
  updateCampus,
  deleteCampus,
}) {

  const [status, setStatus] = useState('');
  const [campuses, setCampuses] = useState(initialCampuses);

  const searchCampuses = useCallback(() => {
    getAllCampuses({ status }).then(setCampuses);
  }, [getAllCampuses, status]);

  useEffect(() => {
    searchCampuses();
  }, [searchCampuses]);

  const CampusForm = ({ campus }) => (
    <div className="space-y-4">
      <Input type="hidden" name="id" defaultValue={campus?.id} />
      <div className="space-y-2">
        <Label>校区名称</Label>
        <Input name="name" required defaultValue={campus?.name} />
      </div>
      <div>
        <Label>校区负责人</Label>
        <Input
          name="principal"
          required
          defaultValue={campus?.principal}
        />
      </div>
      <div>
        <Label>校区地址</Label>
        <Input name="address" required defaultValue={campus?.address} />
      </div>
      <div>
        <Label>校区电话</Label>
        <Input
          name="phone_number"
          required
          defaultValue={campus?.phone_number}
        />
      </div>
      <div>
        <Label>校区状态</Label>
        <CommonSelector
          name="status"
          items={[
            { label: '营业中', value: 'active' },
            { label: '暂停营业', value: 'inactive' },
          ]}
          defaultValue={campus?.status || "active"}
        />
      </div>
    </div>
  );

  const CampusCard = ({ campus }) => (
    <Card>
      <CardHeader>
        <CardTitle className="flex justify-between items-center">
          <p className="text-lg font-bold">{campus.name}</p>
          <div className="flex gap-2">
          <EditModal
          title="编辑校区"
          onSubmit={updateCampus}
          onSuccess={searchCampuses}
          trigger={<Button variant="ghost" size="icon">
            <Pencil className="h-4 w-4 " />
          </Button>}
        >
          <CampusForm campus={campus} />
        </EditModal>
        <EditModal
          title="删除校区"
          onSubmit={deleteCampus}
          confirmButton="删除"
          onSuccess={searchCampuses}
          trigger={<Button variant="ghost" size="icon">
            <Trash2 className="h-4 w-4 text-red-500" />
          </Button>}
        >
          <p>确定要删除该校区吗？</p>
            <Input type="hidden" name="id" defaultValue={campus.id} />
          </EditModal>
        </div>
        </CardTitle>

      </CardHeader>
      <CardContent>
        <div className="flex flex-col gap-2">
          <div className="flex items-center gap-2">
            <Label className="w-24">状态：</Label> <span>{STATUS.find(status => status.value === campus.status)?.label}</span>
          </div>
          <div className="flex items-center gap-2">
            <Label className="w-24">负责人：</Label><span>{campus.principal}</span>
          </div>
          <div className="flex items-center gap-2">
            <Label className="w-24">地址：</Label><span>{campus.address}</span>
          </div>
          <div className="flex items-center gap-2">
            <Label className="w-24">电话：</Label><span>{campus.phone_number}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );

  return (
    <div className="space-y-4 flex-1 flex flex-col">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold">校区管理</h1>
        <EditModal
          title="添加校区"
          onSubmit={createCampus}
          trigger={
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              <span>添加校区</span>
            </Button>
          }
          onSuccess={searchCampuses}
        >
          <CampusForm />
        </EditModal>
      </div>
      <div className="flex justify-end items-center">
      <Label className=" w-24">校区状态</Label>
        <CommonSelector
          items={[
            { label: '营业中', value: 'active' },
            { label: '暂停营业', value: 'inactive' },
          ]}
          defaultValue={status}
          onValueChange={setStatus}
        />
      </div>
      {campuses.length === 0 && (
        <EmptyState message="当前没有任何校区，请点击右上角的“添加校区”按钮来创建校区。" />
      )}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {campuses.map((campus) => (
          <CampusCard key={campus.id} campus={campus} />
        ))}
      </div>
    </div>
  );
}
